<template>
    <view class="page">
        <back :isBack="true" :title="'佣金明细'"></back>
        <view class="content_box">
            <view class="top_box">
                <view class="dange_box" v-for="(item, index) in tableTiltelist" :key="index">{{ item }}</view>
            </view>

            <scroll-view scroll-y class="bot_box" @scrolltolower="lower()" v-if="commList.length > 0">
                <view class="dange_box" v-for="(item, index) in commList" :key="index">
                    <view class="left_box">
                        <view class="tx_box">
                            <image :src="item.avatar" mode="scaleToFill" />
                        </view>
                        <view class="mz_box">{{ item.nickname }}</view>
                    </view>
                    <view class="center_box">总金额：¥{{ item.total_money }}</view>
                    <view class="right_box">¥{{ item.commission_money }}</view>
                </view>
                <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                    padding="" :loadTitle="loadTitle"></aLoadMore>
            </scroll-view>
            <empoy v-else :kongtext="'暂无数据'"></empoy>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            loadStatus: 'down',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            tableTiltelist: [
                '邀请用户', '下单金额', '获得佣金'
            ],
            commList: [],
            page: 1,   // 第一页
            flag: true  // 防抖开关 防止用户不停的下拉
        }
    },
    onShow() {
        this.getCommission()
    },
    methods: {
        lower() {
            if (this.flag) {
                this.orderInfo();
            } else {
                this.loadStatus = 'normal'
            }

        },
        getCommission() {
            let data = {
                page: this.page
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.user.userCommission, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    var commList = res.data.commission;

                    this.page++;
                    this.commList = this.commList.concat(commList);
                    if (commList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1);

    .content_box {
        width: 704rpx;
        // min-height: 370rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding-bottom: 30rpx;

        .top_box {
            width: 636rpx;
            height: 86rpx;
            border-bottom: 2rpx solid rgba(245, 245, 245, 1);
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .dange_box {
                width: 120rpx;
                height: 100%;
                line-height: 86rpx;
                text-align: center;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 86rpx;
                color: rgba(56, 56, 56, 1);
            }
        }

        .bot_box {
            width: 636rpx;
            height: 1290rpx;
            margin: auto;

            .dange_box {
                width: 100%;
                height: 140rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);

                .left_box {
                    width: 35%;
                    height: 140rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tx_box {
                        width: 92rpx;
                        height: 92rpx;
                        border-radius: 50%;
                        margin-right: 20rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .mz_box {
                        height: 34rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 1);
                        line-height: 34rpx;

                    }

                }

                .center_box {
                    width: 45%;
                    height: 140rpx;
                    /** 文本1 */
                    font-size: 28rpx;
                    font-weight: 400;
                    letter-spacing: 0rpx;
                    line-height: 140rpx;
                    color: rgba(0, 0, 0, 1);
                    // text-align: center;

                }

                .right_box {
                    width: 15%;
                    height: 140rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 140rpx;
                    color: rgba(0, 0, 0, 1);
                    text-align: center;

                }
            }
        }

    }
}
</style>